<!-- setup -->
<script setup lang="ts">
import { onMounted, ref, type Ref } from 'vue';
import BaseFrame from '../components/BaseFrame.vue'

const block_margin_left = ref('256')
const block_width = ref('1200')

interface BlockFormData {
  margin_left: string,
  width: string
}
const getBlockForm = (data: BlockFormData) => {
  block_margin_left.value = data.margin_left
  block_width.value = data.width
  console.log(data)
}

const page_title = "哈尔滨市停车场卫星点位地图"

onMounted(() => {
  initMap()
})
</script>

<!-- tencent map -->
<script lang="ts">
const initMap = () => {
  // @ts-ignore
  var center = new TMap.LatLng(45.778336, 126.617723)
  // @ts-ignore
  var map = new TMap.Map(document.getElementById('map-container'), {
    center: center,
    zoom: 17.2,
    baseMap: {
        type: 'satellite',
        features: ['base', 'road'],
    }
  })
}
</script>

<template>
  <BaseFrame :page_title="page_title" @get-block-form_="getBlockForm"/>
  <div class="block__" :style="{ marginLeft: block_margin_left + 'px', width: block_width, transition: '0.34s'}">
    <!-- <el-button type="primary" style="margin-bottom: 5px;" @click="openAddModel()" plain>添加停车场</el-button> -->
    <div id="map-container"></div>
  </div>
</template>

<style lang="scss" scoped>
#map-container {
  width: 1300px;
  height: 600px
}
</style>